<template>
    <div>
        <div v-show="showAlert" class="js_collect_alert text-center input-alert">
            <div class="js_collect_text input-alert-text">{{msg}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                showAlert:false,
                msg:""
            }
        },
        methods:{
            showAlertView(msg){
                this.msg = msg;
                this.showAlert = true;
                setTimeout(()=>{
                    this.showAlert = false;
                },1000)
            }
        }
    }
</script>

<style scoped>
    .input-alert{
        display: block;
        width: 100%;
        position: fixed;
        top:40%;
        bottom: 0;
        left: 0%;
        z-index: 1050;
    }
    .input-alert-text{
        display: inline-block;
        padding: 15px 17px;
        color: #fff;
        border-radius: 5px;
        background-color: rgba(0,0,0,0.6);
        margin-left: 0;
        -webkit-transform: translate(0%);
        transform: translate(0%);
        text-align: center;
    }
</style>
